<template>
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" @click="goback"></i>
      <p>更换头像</p>
    </header>

    <div class="change">
      <p>请选择你喜欢的头像吧</p>
      <ul class="imgtype">
        <li @click="selectImg(1)">
          <img src="../assets/t1.png">
        </li>
        <li @click="selectImg(2)">
          <img src="../assets/t2.png">
        </li>
        <li @click="selectImg(3)">
          <img src="../assets/t3.png">
        </li>
        <li @click="selectImg(4)">
          <img src="../assets/t4.png">
        </li>
        <li @click="selectImg(5)">
          <img src="../assets/t5.png">
        </li>
        <li @click="selectImg(6)">
          <img src="../assets/t6.png">
        </li>
        <li @click="selectImg(7)">
          <img src="../assets/t7.png">
        </li>
        <li @click="selectImg(8)">
          <img src="../assets/t8.png">
        </li>
        <li @click="selectImg(9)">
          <img src="../assets/t9.png">
        </li>
      </ul>

      <div class="button-change">
        <button @click="ChangeImg">确认</button>
      </div>

    </div>


  </div>
</template>


<script>
export default {
  name: 'ChangeImg',
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
    this.getUserInfo();
  },
  methods:{
    selectImg(num){
      this.$axios.post('ImageController/listImageById', this.$qs.stringify({
        imgId: num
      })).then(response => {
        let result = response.data;
        this.user.userImg = result;
      }).catch(error => {
        console.error(error);
      });


    },

    ChangeImg(){
      this.$axios.post('UserController/updateUserById', this.$qs.stringify(
          this.user
      )).then(response => {
        if (response.data > 0) {
          alert('更换头像成功！');
          this.getUserInfo(); // 获取最新的用户信息
          this.$router.go(-1);
        } else {
          alert('更换头像失败！');
        }
      }).catch(error => {
        console.error(error);
      });
    },

    goback(){
      this.$router.go(-1);
    },

    getUserInfo() {
      this.$axios.post('UserController/getUserById', this.$qs.stringify({
        userId: this.user.userId,
      })).then(response => {
        this.user = response.data;
        this.$setSessionStorage('user', this.user); // 保存最新的用户信息到会话存储
      }).catch(error => {
        console.error(error);
      });
    }

  }
}

</script>
<style scoped>
.wrapper header {
  width: 100%;
  height: 12vw;
  background: linear-gradient(#F37373, #F08080, #EF9292);
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;

}
.wrapper header i{
  margin-left: 6vw;
}
.wrapper header p{
  margin-left: 33vw;
}
/****************** 文字部分 ******************/
.wrapper .change{
  padding-top: 16vw;
}
.wrapper .change p{
  font-size: 4.8vw;
  padding-left: 6vw;
  padding-bottom: 6vw;
  color: #666666;
}
/****************** 头像部分 ******************/
.wrapper .change .imgtype {
  width: 90%;
  display: flex;
  /*自动换行*/
  flex-wrap: wrap;
  justify-content: space-around;
  /*把两行当成整体居中 align-items各自居中*/
  align-content: center;
  margin-left: 18px;
}

.wrapper .change .imgtype li{
  /*实现一排3个*/
  width: 33.33%;
  height: 33.33%;

  display: flex;
  /*改变主轴方向*/
  flex-direction: column;
  justify-content: center;
  align-items: center;

  user-select: none;
  /*鼠标悬浮变成手的样式*/
  cursor: pointer;
}

.wrapper .change .imgtype li img {
  width: 70%;
  height: auto;
  border-radius: 50%;
  padding-bottom: 20px;
}

/****************** 按钮部分 ******************/
.wrapper .button-change {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}

.wrapper .button-change button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(#F37373, #F08080, #EF9292);
  border-radius: 4px;
  border: none;
  outline: none;
}

</style>